<template>
    <div class="page-container workPage-container"
        :class="{'main-light': !$store.state.isDarkMode, 'main-dark': $store.state.isDarkMode}"
    >
        <back-header></back-header>
        <div class="work">
            <img v-for="(i, index) of work.workUrl" :key="index"
             :src="i" :alt="index"
            >
        </div>
        <h2>{{ work.title }}</h2>
        <div class="authorInfo">
            <div class="authorImg">
                <img :src="work.authorImg" alt="">
            </div>
            
            <span class="authorName">{{ work.author }}</span><br><br>
            <span>{{ work.pushDate }}</span>&nbsp;
            <span class="heat">{{ work.heat }}</span> 热度！<br><br>
            <span class="tag" v-for="(t, index) of work.tags" :key="index">
                #{{ t }}
            </span><br>
            <span>{{ work.introduction }}</span>
        </div>
    </div>
</template>

<script>
import BackHeader from './BackHeader.vue';
import worksData from '../data/Works.json'

export default {
    name: 'WorkPage',
    components: {
        BackHeader,
    },
    computed:{
        work(){
            return worksData.works[this.$route.query.id -1]
        }
    }
}
</script>

<style lang="less" scoped>
.workPage-container {
    padding: 50px 0;
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    overflow-y: auto;

    .work {
        font-size: 0;
        width: 100vw;
        img {
            height: auto;
            width: 100%;
        }
    }
    h2 {
        margin: 10px;
        margin-bottom: 50px;
    }
    .authorInfo {
        margin: 10px;

        .authorImg {
            display: inline-block;
            height: 50px;
            width: 50px;
            border-radius: 25px;
            overflow: hidden;
            vertical-align: middle;
            margin-right: 10px;
            img {
                height: 100%;
                width: 100%;
            }
        }
        .authorName {
            font-size: 1.2em;
            font-weight: bold;
        }
        .heat {
            font-weight: bold;
        }
        .tag {
            color: rgb(34, 113, 150);
        }
    }
}

</style>